/* 时钟边框样式 */
.clock-border {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: none;
  transform: rotate(45deg);
  animation: rotate-clock-border 0.69s cubic-bezier(0.645, -0.18, 0.605, 1.36) 0.69s 1 forwards;
}

/* 时钟主体样式 */
.clock {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 400px;
  height: 400px;
  padding: 0;
  background-color: #262c33;
  border: 18px solid #373f4a;
  border-radius: 50%;
  transform: rotate(-45deg);
  animation: counterrotate-clock 0.69s cubic-bezier(0.645, -0.18, 0.605, 1.36) 0.69s 1 forwards;
}

/* 时针容器样式 */
.hour {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(84deg);
}

/* 时针样式 */
.hour .hand {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: tick 43200s normal infinite steps(3600, end) 3s;
}

.hour .hand::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  width: 16px;
  height: 0;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  transform-origin: center 100%;
  background-color: #fff;
  animation: hour-grow-before 0.4s cubic-bezier(0.69, -0.06, 0.49, 1.4) 1.35s 1 forwards;
}

.hour .hand::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  border-bottom: 16px solid #ffffff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  width: 0px;
  height: 0px;
  transform-origin: center 100%;
  animation: hour-grow-after 0.4s cubic-bezier(0.69, -0.06, 0.49, 1.4) 1.35s 1 forwards;
}

/* 分针容器样式 */
.minute {
  position: absolute;
  top: 0;
  bottom: 0;
}